<template>
	<view class="body">
		<view class="header">
			<view>
				<image src="@/static/public/left_arrow.png" alt="左箭头" mode="heightFix" @click="goBack()">
			</view>
			<view>发布需求</view>
			<view><u-toast ref="uToast"></u-toast></view>
		</view>
		<view class="requirement">
			<view>
				<image src="@/static/home/publish/point.png" alt="圆点" class="point" /> 您的需求
				<span class="star">*</span>
			</view>
			<view class="title">
				<u--input placeholder="一句话描述您的需求" maxlength="30" border="bottom" clearable
					v-model="submit.title"></u--input>
			</view>
			<view class="content">
				<u--textarea placeholder="具体需求..." maxlength="300" height="100" border="none" v-model="submit.content"
					style="padding-bottom: 5vw;"></u--textarea>
			</view>
			<view style="display: flex;flex-wrap: wrap;">
				<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="3" width="55" height="55"></u-upload>
				<view style="flex: 1;position: relative;">
					<span style="position: absolute; right:3vw; bottom: 1vw;color: #BBBBBB;">
						{{submit.content.length}}/300
					</span>
				</view>
			</view>
		</view>
		<view class="details">
			<view class="nature">
				<view>
					<image src="@/static/home/publish/point.png" alt="圆点" class="point" />
					任务性质<span class="star">*</span>
				</view>
				<view>
					<span @click="online.show = true">
						{{online.select == null ?"请选择":online.select}}
						<image class="right_arrow" src="@/static/public/right_arrow.png" alt="右箭头" mode="heightFix">
					</span>
					<u-action-sheet :actions="online.list" @select="onlineSelect" :show="online.show"
						@close="online.show = false"></u-action-sheet>
				</view>
			</view>
			<view class="sort">
				<view>
					<image src="@/static/home/publish/point.png" alt="圆点" class="point" />
					分类<span class="star">*</span>
				</view>
				<view>
					<span @click="sortShow">
						{{sort.column == null ? "请选择":sort.column.name}}
						<image class="right_arrow" src="@/static/public/right_arrow.png" alt="右箭头" mode="heightFix">
					</span>
					<u-picker :show="sort.show" :columns="sort.columns" keyName="name" @cancel="sort.show=false"
						@change="sortChange" @confirm="sort.show=false" :closeOnClickOverlay="true"
						@close="sort.show = false"></u-picker>
				</view>
			</view>
			<view class="address" v-if="online.select == '线下'">
				<view>
					<view>
						<image src="@/static/home/publish/point.png" alt="圆点" class="point" />
						地址<span class="star">*</span>
					</view>
					<view @click="getAddress()">
						<span>{{address.name == "" ? "请选择":address.name}}</span>
						<span>
							<image class="right_arrow" src="@/static/public/right_arrow.png" alt="右箭头" mode="heightFix">
						</span>
					</view>
				</view>
				<view>
					<u--input placeholder="详细地址" border="none" clearable color="#9B9BAB"
						v-model="submit.detailsAddress"></u--input>
				</view>
			</view>
			<view class="time">
				<view>
					<image src="@/static/home/publish/point.png" alt="圆点" class="point" />结束时间<span
						class="star">*</span>
				</view>
				<view @click="time.show = true">{{getTimeDate}}结束
					<image class="right_arrow" src="@/static/public/right_arrow.png" alt="右箭头" mode="heightFix">
						<u-picker :show="time.show" :columns="time.columns" @change="timechange" keyName="name"
							@cancel="time.show=false" @confirm="time.show=false" :closeOnClickOverlay="true"
							@close="time.show = false"></u-picker>
				</view>
			</view>
			<view class="price">
				<view>
					<image src="@/static/home/publish/point.png" alt="圆点" class="point" />价格<span class="star">*</span>
				</view>
				<view @click="priceShow=true;key=true">
					{{submit.price==''?"请输入":submit.price}}
					<image class="right_arrow" src="@/static/public/right_arrow.png" alt="右箭头" mode="heightFix">
				</view>

				<u-modal :show="priceShow" @confirm="priceShow=false;key=false" title="请输入金额">
					<view @click="key=true"
						style="border: 1px solid #BBBBBB;height: 10vw;line-height: 10vw;width: 70vw;border-radius: 3vw;display: flex;flex-wrap: wrap;font-size: 5vw;color: #BBBBBB;">
						<view style="text-align: center;width: 10vw;border-right: 1px solid #BBBBBB;">
							¥
						</view>
						<view style="padding-left: 3vw;">
							{{submit.price==''?"请输入金额":submit.price}}
						</view>
					</view>
				</u-modal>

				<u-keyboard mode="number" @change="valChange" @backspace="backspace" @close="key=false"
					@cancel="key=false" @confirm="priceShow=false;key=false" :show="key"></u-keyboard>
			</view>
			<view class="name">
				<view style="width: 30%;">
					<image src="@/static/home/publish/point.png" alt="圆点" class="point" />
					联系人<span class="star">*</span>
				</view>
				<view>
					<u--input placeholder="请输入姓名" border="none" maxlength="20" color="#9B9BAB"
						customStyle="line-height: 10vw;height: 10vw;color: #9B9BAB;" v-model="submit.name">
					</u--input>
				</view>
				<view style="width: 35%; display: flex;flex-wrap: wrap;">
					<view style="width: 3vw;height: 3vw; border-radius: 50%;margin-top: 3vw;margin-right: 1vw;"
						:style="{border:submit.sex ? '1px solid #FF5721':'1px solid #BBBBBB'}" @click="secClick(true)">
						<view v-if="submit.sex"
							style="width: 2vw;height: 2vw;background-color: #FF5721;margin: 0.5vw auto;border-radius: 50%;">
						</view>
					</view>先生
					<view
						style="width: 3vw;height: 3vw; border-radius: 50%;margin-top: 3vw;margin-left: 2vw;margin-right: 1vw;"
						:style="{border:submit.sex ? '1px solid #BBBBBB':'1px solid #FF5721'}" @click="secClick(false)">
						<view v-if="!submit.sex"
							style="width: 2vw;height: 2vw;background-color: #FF5721;margin: 0.5vw auto;border-radius: 50%;">
						</view>
					</view>女士
				</view>
			</view>
			<view class="phone">
				<view>
					<image src="@/static/home/publish/point.png" alt="圆点" class="point" />
					联系方式<span class="star">*</span>
				</view>
				<view>
					<u--input placeholder="请输入手机号" border="none" type="digit" color="#9B9BAB"
						customStyle="line-height: 10vw;height: 10vw;color: #9B9BAB;" v-model="submit.phone">
					</u--input>
				</view>
			</view>
		</view>
		<view class="agreement">
			<u-checkbox-group>
				<u-checkbox @click="onAgreement()" :shape="'square'" :size="15" @change="onAgreement" />
			</u-checkbox-group>
			同意<a href="https://zh.wikipedia.org/zh-cn/%E9%80%9A%E4%BF%A1%E5%8D%8F%E8%AE%AE">⟪任务发布协议⟫</a>和<a
				href="https://zh.wikipedia.org/zh-cn/%E9%80%9A%E4%BF%A1%E5%8D%8F%E8%AE%AE">⟪赏金支付规则⟫</a>
		</view>
		<view class="payment">
			<view>
				<b><span style="font-size: 5vw;">¥</span>{{submit.price==""?"0":submit.price}}</b>
				<image src="@/static/home/publish/bottom.png" style="width: 4vw;margin-left: 1vw;" mode="widthFix">
				</image>
				<!-- <view><b>¥{{submit.price==""?"0":submit.price}}</b></view> -->
				<!-- <view>查看详情
					<image src="@/static/home/publish/top_arrow.png" alt="上箭头" mode="widthFix" style="width: 2vw;" />
				</view> -->
			</view>
			<view><b>找人付</b></view>
			<view @click="addQuest()">立即支付</view>
		</view>
	</view>
</template>
<script>
	import {
		rear
	} from '@/config/api.js';
	export default {
		data() {
			return {
				key: false,
				priceShow: false,
				online: {
					show: false,
					select: '线上',
					list: [{
							name: '线上'
						},
						{
							name: '线下'
						}
					]
				},
				addQuestTag:false,
				sort: {
					show: false,
					columns: [
						[],
						[]
					],
					column: null
				},
				address: {
					name: "",
					latitude: "",
					longitude: ""
				},
				time: {
					show: false,
					text: null,
					date: null,
					columns: [
						[{
								name: "0天",
								num: 0
							},
							{
								name: "1天",
								num: 1
							},
							{
								name: "2天",
								num: 2
							},
							{
								name: "3天",
								num: 3
							},
							{
								name: "4天",
								num: 4
							},
							{
								name: "5天",
								num: 5
							},
						],
						[{
								name: "0小时",
								num: 0
							},
							{
								name: "1小时",
								num: 1
							},
							{
								name: "2小时",
								num: 2
							},
							{
								name: "2小时",
								num: 3
							},
							{
								name: "4小时",
								num: 4
							},
							{
								name: "5小时",
								num: 5
							},
							{
								name: "6小时",
								num: 6
							},
							{
								name: "7小时",
								num: 7
							},
							{
								name: "8小时",
								num: 8
							},
							{
								name: "9小时",
								num: 9
							},
							{
								name: "10小时",
								num: 10
							},
							{
								name: "11小时",
								num: 11
							},
							{
								name: "12小时",
								num: 12
							},
							{
								name: "13小时",
								num: 13
							},
							{
								name: "14小时",
								num: 14
							},
							{
								name: "15小时",
								num: 15
							},
							{
								name: "16小时",
								num: 16
							},
							{
								name: "17小时",
								num: 17
							},
							{
								name: "18小时",
								num: 18
							},
							{
								name: "19小时",
								num: 19
							},
							{
								name: "20小时",
								num: 20
							},
							{
								name: "21小时",
								num: 21
							},
							{
								name: "22小时",
								num: 22
							},
							{
								name: "23小时",
								num: 23
							}
						],
						[{
								name: "0分钟",
								num: 0
							},
							{
								name: "5分钟",
								num: 5
							},
							{
								name: "10分钟",
								num: 10
							},
							{
								name: "15分钟",
								num: 15
							},
							{
								name: "20分钟",
								num: 20
							},
							{
								name: "25分钟",
								num: 25
							},
							{
								name: "30分钟",
								num: 30
							},
							{
								name: "35分钟",
								num: 35
							},
							{
								name: "40分钟",
								num: 40
							},
							{
								name: "45分钟",
								num: 45
							},
							{
								name: "50分钟",
								num: 50
							},
							{
								name: "55分钟",
								num: 55
							}

						]
					]
				},
				agreement: false,
				fileList: [],
				lists: [],
				submit: {
					title: '',
					price: "",
					content: "",
					address: "",
					detailsAddress: "",
					name: "",
					phone: "",
					city: "",
					sex: true
				}
			}
		},
		methods: {
			valChange(val) {

				if (this.submit.price.indexOf('.') != -1 || val == '.') {
					// if (this.submit.price.length != 0) {

					// 	if (this.submit.price.indexOf('.') > -1 && val != '.') {
					// 		if (this.submit.price.split(".")[1].length < 2) {
					// 			this.submit.price += val;
					// 		}
					// 	} else if (this.submit.price.indexOf('.') == -1) {
					// 		this.submit.price += val;
					// 	}
					// }
				} else {
					if (this.submit.price.length < 6) {
						this.submit.price += val;
					}
				}


			},


			backspace() {
				// 删除value的最后一个字符
				if (this.submit.price.length) this.submit.price = this.submit.price.substr(0, this.submit.price.length -
					1);
			},
			secClick(log) {
				this.submit.sex = log
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 删除图片
			deletePic(event) {
				this[`fileList`].splice(event.index, 1)
				this[`lists`].splice(event.index, 1)
			},
			// 新增图片
			afterRead(event) {
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList`].length
				lists.map((item) => {
					this[`fileList`].push({
						...item
					})
				})
				for (var i = 0; i < lists.length; i++) {
					this.lists.push(lists[i])
				}
			},
			onlineSelect(index) {
				this.online.select = index.name
				if (this.online.select == "线上") {
					this.address = {
						name: "",
						latitude: "",
						longitude: ""
					}
				}
				this.online.show = false
			},
			sortChange(e) {
				const {
					columnIndex,
					value,
					picker = this.$refs.uPicker
				} = e
				this.sort.column = value[1]
				if (columnIndex === 0) {
					uni.request({
						url: rear + "/sort/getSortByParentId",
						method: 'GET',
						data: {
							parentId: value[0].id
						},
						success: (res) => {
							picker.setColumnValues(1, res.data.data)
							this.sort.column = res.data.data[0]
						}
					});
				}
			},
			sortShow() {
				if (this.sort.column == null) {
					this.sort.column = this.sort.columns[1][0]
				}
				this.sort.show = true;
			},
			getAllParentSort() {
				uni.request({
					url: rear + "/sort/getAllParentSort", // API 地址
					method: 'GET', // 请求方法
					success: (parent) => {
						uni.request({
							url: rear + "/sort/getSortByParentId", // API 地址
							method: 'GET', // 请求方法
							data: {
								parentId: parent.data.data[0].id
							},
							success: (res) => {
								this.sort.columns = [parent.data.data, res.data.data];
							}
						});
					}
				});
			},
			getAddress() {
				uni.chooseLocation({
					success: res => {
						this.address = res;
						uni.request({
							url: "https://restapi.amap.com/v3/geocode/regeo",
							method: "GET",
							data: {
								output: "json",
								location: this.address.longitude + "," + this.address.latitude,
								key: "29fba64b6474d5732699b53c09a3129e"
							},
							success: (res) => {
								const addressComponent = res.data.regeocode.addressComponent
								this.submit.city = (addressComponent.country + addressComponent
									.province +
									addressComponent.city + addressComponent.district +
									addressComponent
									.township +
									addressComponent.streetNumber.street);
							}
						})
					}
				});
			},
			timechange(e) {
				const {
					columnIndex,
					value,
					picker = this.$refs.uPicker
				} = e
				if (value.every(v => v.num === 0)) {
					this.time.date = null;
				} else {
					let currentTime = new Date();
					currentTime.setTime(currentTime.getTime() +
						(value[0].num * 24 * 60 * 60 * 1000) +
						(value[1].num * 60 * 60 * 1000) +
						(value[2].num * 60 * 1000)
					);
					this.time.date = currentTime;
				}
			},
			onAgreement() {
				this.agreement = !this.agreement;
			},
			addQuest() {
				if(this.addQuestTag){
					return;
				}
				this.addQuestTag = true;
				//判断标题是否为空
				if (this.submit.title == "") {
					uni.showToast({
						title: '标题不能为空',
						icon: 'none',
						duration: 2000,
					})
					return;
				}
				if (this.submit.title.length > 15) {
					uni.showToast({
						title: '标题不能超过15个字',
						icon: 'none',
						duration: 2000,
					})
					return;
				}
				//内容
				if (this.submit.content == "") {
					uni.showToast({
						title: '内容不能为空',
						icon: 'none',
						duration: 2000,
					})
					return;
				}
				//分类
				if (this.sort.column == null) {
					uni.showToast({
						title: '请选择分类',
						icon: 'none',
						duration: 2000,
					})
					return;
				}
				//如果选择了线下，地址不能为空
				if (this.online.select == "线下" && this.address.name == "") {
					uni.showToast({
						title: '请选择地址',
						icon: 'none',
						duration: 2000,
					})
					return;
				}
				//金额
				if (this.time.date == null) {
					uni.showToast({
						title: '请选择结束时间',
						icon: 'none',
						duration: 2000,
					})
					return;
				} //金额
				if (this.submit.price == "") {
					uni.showToast({
						title: '请输入金额',
						icon: 'none',
						duration: 2000,
					})
					return;
				}
				// if (this.submit.price.includes('.')) {
				// 	uni.showToast({
				// 		title: '金额必须为整数',
				// 		icon: 'none',
				// 		duration: 2000,
				// 	})
				// 	return;
				// }
				if (Number(this.submit.price) < 5) {
					uni.showToast({
						title: '金额不能小于5元',
						icon: 'none',
						duration: 2000,
					})
					return;
				}
				//联系方式
				if (this.submit.name == "") {
					uni.showToast({
						title: '请输入称谓',
						icon: 'none',
						duration: 2000,
					})
					return;
				}
				//联系方式
				if (this.submit.phone == "") {
					uni.showToast({
						title: '请输入联系方式',
						icon: 'none',
						duration: 2000,
					})
					return;
				}
				if (!/^1[3-9]\d{9}$/.test(this.submit.phone)) {
					uni.showToast({
						title: '联系方式不正确',
						icon: 'none',
						duration: 2000,
					})
					return;
				}
				//协议
				if (this.agreement == false) {
					uni.showToast({
						title: '请勾选用户协议',
						icon: 'none',
						duration: 2000,
					})
					return;
				}
				let cover = []
				const uploadTasks = [];
				for (let i = 0; i < this.lists.length; i++) {
					uploadTasks.push(new Promise((resolve, reject) => {
						uni.uploadFile({
							url: rear + '/file/upload',
							filePath: this.lists[i].url,
							name: 'file',
							success: (picUrl) => {
								cover.push("https://item-kf.oss-cn-hangzhou.aliyuncs.com/" +
									JSON.parse(picUrl.data).data);
								resolve();
							}
						});
					}));
				}
				Promise.all(uploadTasks).then(() => {
					let address = '';
					if (this.online.select == "线下") {
						address = JSON.stringify({
							name: this.address.name,
							detailsAddress: [this.submit.detailsAddress, this.address.address],
							coordinate: this.address.longitude + "," + this.address.latitude
						});
					}
					uni.request({
						url: rear + "/quest/addQuest", // API 地址,
						method: 'POST',
						data: {
							"initiatorId": uni.getStorageSync('user').id, //发起人id
							"title": this.submit.title, //标题
							"content": this.submit.content, //内容
							"sortId": this.sort.column.id, //分类id
							"cover": JSON.stringify(cover), //标题
							"address": address, //地址名称
							"city": this.submit.city, //详细地址
							"price": this.submit.price, //金额
							"name": this.submit.name + (this.submit.sex ? "先生" : "女士"),
							"phone": this.submit.phone, //手机号
							"cutoffTime": this.time.date, //截止时间
						},
						success: (res) => {
							if (res.data.data == "添加成功") {
								uni.showToast({
									title: '任务发布成功',
									icon: 'none',
									duration: 2000
								});
								uni.setStorageSync('homeRefresh', true);
								uni.switchTab({
									url: "../home/index",
								});
							} else {
								uni.showToast({
									title: '任务发布失败',
									icon: 'none',
									duration: 2000,
								})
							}
						}
					})
				});
			},
		},
		onLoad() {
			this.getAllParentSort();
		},
		computed: {
			getTimeDate() {
				if (this.time.date === null) {
					return "请选择日期";
				}
				let date = this.time.date;
				let year = date.getFullYear();
				let month = String(date.getMonth() + 1).padStart(2, '0');
				let day = String(date.getDate()).padStart(2, '0');
				let hours = String(date.getHours()).padStart(2, '0');
				let minutes = String(date.getMinutes()).padStart(2, '0');
				let seconds = String(date.getSeconds()).padStart(2, '0');
				let formattedDate = `${year}年${month}月${day}日 ${hours}:${minutes}`;
				return formattedDate;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.body {
		height: 100vh;
		background-color: #FCFBFA;
		box-sizing: border-box;

		>view {
			margin: 2vw 3vw 0 3vw;
			border-radius: 3vw;
			padding: 3vw;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
		}

		.header {
			z-index: 100;
			position: sticky;
			top: 0vw;
			margin: 0;
			border-radius: 0;
			padding-top: 15vw;
			background-color: #FFFFFF;
			font-size: 5vw;
			display: flex;
			flex-wrap: wrap;

			view {
				width: 20%;

				image {
					height: 1em;
					vertical-align: -0.15em;
				}
			}

			view:nth-of-type(2) {
				width: 60%;
				text-align: center;
			}
		}

		.requirement {
			background-color: #FFFFFF;

			>view:nth-of-type(2) {
				margin-top: 2vw;
			}

			>view:nth-of-type(2),
			>view:nth-of-type(3) {
				padding: 0 1vw;

				textarea {
					height: 50vw;
				}
			}

			>view:nth-of-type(4) {
				padding-top: 2vw;
			}
		}

		.details {
			background-color: #FFFFFF;
			font-size: 3.5vw;

			>view {
				line-height: 10vw;
				border-bottom: 1px solid rgba(0, 0, 0, 0.1)
			}

			.natureAndClassification {
				display: flex;
				flex-wrap: wrap;

				>view:nth-of-type(1) {
					width: 40%;
					padding-right: 2%;
					box-sizing: border-box;

					view:nth-of-type(1) {
						width: 60%;
					}

					view:nth-of-type(2) {
						width: 40%;
					}
				}

				>view:nth-of-type(2) {
					width: 60%;

					view:nth-of-type(1) {
						width: 21%;
					}

					view:nth-of-type(2) {
						width: 79%;
					}
				}

				>view {
					display: flex;
					flex-wrap: wrap;

					>view:nth-of-type(2) {
						color: #9B9BAB;
						text-align: right;
					}
				}
			}

			.address {
				>view:nth-of-type(1) {
					display: flex;
					flex-wrap: wrap;
					height: 8vw;
					line-height: 8vw;

					view:nth-of-type(1) {
						width: 15%;
					}

					view:nth-of-type(2) {
						width: 85%;
						color: #9B9BAB;
						text-align: right;

						span {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							display: inline-block;
							line-height: 8vw;
						}

						span:nth-of-type(1) {
							width: 85%;
						}
					}
				}

				>view:nth-of-type(2) {
					>* {
						margin-top: 2vw;
					}
				}
			}

			.time {
				display: flex;
				flex-wrap: wrap;

				view:nth-of-type(1) {
					width: 30%;
				}

				view:nth-of-type(2) {
					width: 70%;
					text-align: right;
					color: #9B9BAB;
				}
			}

			.nature,
			.sort,
			.price,
			.name,
			.phone {
				display: flex;
				flex-wrap: wrap;

				>view:nth-of-type(1) {
					width: 65%;
				}

				>view:nth-of-type(2) {
					width: 35%;
					text-align: right;
					color: #9B9BAB;
				}
			}

			.phone {
				border: none;
			}

		}

		.agreement {
			box-shadow: none;
			padding: 0;
			font-size: 3.5vw;
			display: flex;
			flex-wrap: wrap;

			a {
				text-decoration: none;
				color: #FF5721;
			}
		}

		.payment {
			position: fixed;
			bottom: 0;
			margin: 0;
			width: 100vw;
			border-radius: 0;
			padding: 3vw;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			font-size: 4vw;

			>view {
				height: 12vw;
				line-height: 12vw;
			}

			>view:nth-of-type(1) {
				font-size: 7vw;
				padding-left: 5vw;
				box-sizing: border-box;
				width: 50%;
				background-color: black;
				color: #FFFFFF;
				border-radius: 20vw 0 0 20vw;
			}

			>view:nth-of-type(2) {
				background-color: black;
				width: 20%;
				text-align: center;
				// padding-right: 3%;
				box-sizing: border-box;
				background-color: #333333;
				color: #FFFFFF;

				view {
					height: 4vw;
					line-height: 4vw;
					text-align: center;
				}

				view:nth-of-type(1) {
					margin-top: 2vw;
				}

				view:nth-of-type(2) {
					font-size: 3vw;
				}
			}

			>view:nth-of-type(3) {
				width: 30%;
				background: linear-gradient(to bottom, #FE996E, #FF5721);
				text-align: center;
				color: #FFFFFF;
				border-radius: 0 20vw 20vw 0;

			}
		}
	}

	.point {
		width: 0.3em;
		height: 0.3em;
		vertical-align: 0.2em;
		margin-right: 0.3em;
	}

	.star {
		color: red;
	}

	.right_arrow {
		height: 1em;
		vertical-align: -0.2em;
		margin: 0 2vw;
	}
</style>